<template>
	<div class="app-status-indicator">
		<!-- 生成状态 -->
		<a-tag v-if="showGenerateStatus" :color="generateStatusColor" class="status-tag generate-status">
			<template #icon v-if="generateStatusIcon">
				<component :is="generateStatusIcon" :class="{ 'loading-icon': isGenerating }" />
			</template>
			{{ generateStatusText }}
		</a-tag>

		<!-- 部署状态 -->
		<a-tag v-if="showDeployStatus" :color="deployStatusColor" class="status-tag deploy-status">
			<template #icon v-if="deployStatusIcon">
				<component :is="deployStatusIcon" :class="{ 'loading-icon': isDeploying }" />
			</template>
			{{ deployStatusText }}
		</a-tag>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
	LoadingOutlined,
	CheckCircleOutlined,
	CloseCircleOutlined,
	ExclamationCircleOutlined,
	StopOutlined,
	ClockCircleOutlined,
	RocketOutlined,
} from '@ant-design/icons-vue'
import {
	DEPLOY_STATUS,
	GENERATE_STATUS,
	DEPLOY_STATUS_TEXT,
	GENERATE_STATUS_TEXT,
	DEPLOY_STATUS_COLOR,
	GENERATE_STATUS_COLOR,
	type DeployStatus,
	type GenerateStatus,
} from '@/constants/appStatus'

interface Props {
	generateStatus?: number | string | null // 生成状态
	deployStatus?: number | string | null // 部署状态
	showGenerateStatus?: boolean // 是否显示生成状态
	showDeployStatus?: boolean // 是否显示部署状态
	size?: 'small' | 'default' // 尺寸
}

const props = withDefaults(defineProps<Props>(), {
	generateStatus: null,
	deployStatus: null,
	showGenerateStatus: true,
	showDeployStatus: true,
	size: 'default',
})

// 将状态转换为数字
const numericGenerateStatus = computed(() => {
	if (props.generateStatus === null || props.generateStatus === undefined) return null
	return typeof props.generateStatus === 'string' ? parseInt(props.generateStatus) : props.generateStatus
})

const numericDeployStatus = computed(() => {
	if (props.deployStatus === null || props.deployStatus === undefined) return null
	return typeof props.deployStatus === 'string' ? parseInt(props.deployStatus) : props.deployStatus
})

// 生成状态相关
const generateStatusText = computed(() => {
	const status = numericGenerateStatus.value
	if (status === null) return '未知'
	return GENERATE_STATUS_TEXT[status as GenerateStatus] || '未知'
})

const generateStatusColor = computed(() => {
	const status = numericGenerateStatus.value
	if (status === null) return 'default'
	return GENERATE_STATUS_COLOR[status as GenerateStatus] || 'default'
})

const generateStatusIcon = computed(() => {
	const status = numericGenerateStatus.value
	if (status === null) return null

	switch (status) {
		case GENERATE_STATUS.NOT_GENERATED:
			return ClockCircleOutlined
		case GENERATE_STATUS.GENERATING:
			return LoadingOutlined
		case GENERATE_STATUS.COMPLETED:
			return CheckCircleOutlined
		case GENERATE_STATUS.FAILED:
			return CloseCircleOutlined
		case GENERATE_STATUS.INTERRUPTED:
			return StopOutlined
		default:
			return null
	}
})

const isGenerating = computed(() => {
	return numericGenerateStatus.value === GENERATE_STATUS.GENERATING
})

// 部署状态相关
const deployStatusText = computed(() => {
	const status = numericDeployStatus.value
	if (status === null) return '未知'
	return DEPLOY_STATUS_TEXT[status as DeployStatus] || '未知'
})

const deployStatusColor = computed(() => {
	const status = numericDeployStatus.value
	if (status === null) return 'default'
	return DEPLOY_STATUS_COLOR[status as DeployStatus] || 'default'
})

const deployStatusIcon = computed(() => {
	const status = numericDeployStatus.value
	if (status === null) return null

	switch (status) {
		case DEPLOY_STATUS.NOT_DEPLOYED:
			return ClockCircleOutlined
		case DEPLOY_STATUS.DEPLOYED:
			return CheckCircleOutlined
		case DEPLOY_STATUS.DEPLOYING:
			return RocketOutlined
		default:
			return null
	}
})

const isDeploying = computed(() => {
	return numericDeployStatus.value === DEPLOY_STATUS.DEPLOYING
})
</script>

<style scoped lang="scss">
.app-status-indicator {
	display: flex;
	align-items: center;
	gap: 8px;

	.status-tag {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 12px;
		border-radius: 6px;

		:deep(.anticon) {
			font-size: 12px;
		}

		.loading-icon {
			animation: spin 1s linear infinite;
		}
	}

	// 小尺寸样式
	&.size-small {
		gap: 6px;

		.status-tag {
			font-size: 11px;
			padding: 2px 6px;

			:deep(.anticon) {
				font-size: 10px;
			}
		}
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
